<template>
	<el-row class="grill-row-home">
		<el-col :span="4" align="center">
			<svg-icon icon="icon-team" class="icon-div" className="icon-svg" size="34px" bColor="rgba(37, 97, 239, 1)" color="#FFFFFF"></svg-icon>
			<el-card class="layout-home grill-col-home">
				<el-statistic :value="10000"> </el-statistic>
				<p>在职员工</p>
			</el-card>
		</el-col>
		<el-col :span="4" align="center">
			<svg-icon icon="icon-adduser" class="icon-div" className="icon-svg" size="34px" bColor="rgba(102, 110, 232, 1)" color="#FFFFFF"></svg-icon>
			<el-card class="layout-home grill-col-home">
				<el-statistic :value="80"> </el-statistic>
				<p>待入职员工</p>
			</el-card>
		</el-col>
		<el-col :span="4" align="center">
			<svg-icon icon="icon-switchuser" class="icon-div" className="icon-svg" size="34px" bColor="rgba(61, 212, 167, 1)" color="#FFFFFF"></svg-icon>
			<el-card class="layout-home grill-col-home">
				<el-statistic :value="100"> </el-statistic>
				<p>试用期员工</p>
			</el-card>
		</el-col>
		<el-col :span="4" align="center">
			<svg-icon icon="icon-user" class="icon-div" className="icon-svg" size="34px" bColor="rgba(250, 116, 107, 1)" color="#FFFFFF"></svg-icon>
			<el-card class="layout-home grill-col-home">
				<el-statistic :value="8905"> </el-statistic>
				<p>正式员工</p>
			</el-card>
		</el-col>
		<el-col :span="4" align="center">
			<svg-icon icon="icon-adduser" class="icon-div" className="icon-svg" size="34px" bColor="rgba(253, 219, 120, 1)" color="#FFFFFF"></svg-icon>
			<el-card class="layout-home grill-col-home">
				<el-statistic :value="44"> </el-statistic>
				<p>待离职员工</p>
			</el-card>
		</el-col>
		<el-col :span="4" align="center">
			<svg-icon icon="icon-solution" class="icon-div" className="icon-svg" size="34px" bColor="rgba(204, 204, 204, 1)" color="#FFFFFF"></svg-icon>
			<el-card class="layout-home grill-col-home">
				<el-statistic :value="609"> </el-statistic>
				<p>已离职员工</p>
			</el-card>
		</el-col>
	</el-row>
</template>

<script setup lang="ts"></script>

<style>
.icon-div {
	position: relative;
	top: -25px;
	height: 0px;
}

.icon-svg {
	border-radius: 16px;
	padding: 8px;
}

.icon-display {
	> use {
		display: none;
	}
	border-radius: 2px;
}

.icon-warn {
	> use {
		display: none;
	}
	border-radius: 2px;
}
</style>
